<template>
	<div id="slider" class="mui-slider">
		<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			<div class="mui-scroll">
				<a :class="['mui-control-item', item.id == 6 ? 'mui-active' : '']" v-for="item in cases" :key="item.id">
					{{ item.title }}
				</a>
			</div>
		</div>
	</div>
</template>

<script>
// 1. 导入mui的js文件
import mui from '../../lib/mui/js/mui.min.js'


export default {
	data(){
		return{
			cases:[
				{ title: '家居生活', id:0 },
				{ title: '摄影设计', id:1 },
				{ title: '明星美女', id:2 },
				{ title: '古典美女', id:3 },
				{ title: '明星写真', id:4 },
				{ title: '甜美活泼', id:5 }
			]
		};
	},
	created(){
		this.getAllCateory();
	},
	mounted(){ //当 组件中的DOM结构 被渲染好 并放到页面中后, 会执行这个钩子函数
	//如果要操作元素了, 最好在mounted里面, 因为这时候的 DOM元素是最新的
		//2. 初始化滑动控件
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
	},
	methods:{
		getAllCateory(){
			cases = this.cases.unshift({ title:'全部', id:6 });

		}
	}
}
</script>

<style>
*{
	touch-action: pan-y;
}
</style>